import React, { Component, Fragment } from 'react';
import { Spin, Card, Button, Modal } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import styles from './Index.less';

class CustomerService extends Component {
    state = {
        visible: false,
        display1: 'none',
        display2: 'none',
        imgSrc: '',
        loading: true
    }

    componentWillMount() {
      window.Isoption = false;
        this.getAuthStatus();
    }
    componentDidMount() {
      window.Isoption = true;
    }


    getAuthStatus = () => {
        let { dispatch, match } = this.props;

        dispatch({
            type: `xcxauth/GetAuthStatus`,
            callback: {
                success: (data) => {
                    if (data.Code !== 0) {
                        router.replace({
                            pathname: `/${window.storeId}/wechat/miniapp`,
                        });

                    } else {
                        this.getAuthInfo();
                    }
                }
            }
        });
    }
    getAuthInfo = () => {
        let { dispatch, match } = this.props;

        dispatch({
            type: `xcxauth/GetAuthInfo`,
            param: { storeId: window.storeId },
            callback: {
              success: (data) => {
                  if (data.Code === 0) {
                    this.setState({loading: false})
                  }
              }
          }
        });
    }
    showModal = (src) => {
        this.setState({
            visible: true,
            imgSrc: src
        });
    }

    showFloor = (num) => {
        if (num == 1) {
            this.setState({
                display1: 'block',
            });
        } else {
            this.setState({
                display2: 'block',
            });
        }
    }
    addKefu = () => {
        window.open('https://mp.weixin.qq.com')
    }
    loginWechat = () => {
        window.open('https://mpkf.weixin.qq.com')
    }
    hideFloor = () => {
        this.setState({
            display1: 'none',
            display2: 'none',
        });
    }

    handleCancel = () => {
        this.setState({
            visible: false,
        });
    }
    render() {
        const { xcxauth } = this.props
        const { imgSrc, loading } = this.state

        const CardTit = [xcxauth && xcxauth.AppName, '第一步 添加客服账号', '第二步 客服扫码登录']
        return (
            <Fragment>
                <Spin spinning={loading}>
                <Modal
                // title="Basic Modal"
                visible={this.state.visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                footer={null}
                width={800}
                >
                  <Card bordered={false}><img src={imgSrc} width="100%" alt=""/></Card>
                </Modal>
                <Card className={styles.CStop} bordered={false} title={CardTit[0]}>
                这是当前店铺绑定的小程序账号，设置好小程序客服以后，买家就可以在小程序内向您的客服人员发起咨询了。
                </Card>
                  <Card className={styles.CSstep1} bordered={false} title={CardTit[1]}>
                      <div className="text">
                          <p>1. 打开微信公众平台，登录当前店铺绑定的小程序账号；</p>
                          <p>2. 从微信公众平台左侧菜单“功能 》客服”进入客服人员管理页面；</p>
                          <p>3. 添加客服人员的微信号。</p>
                          <Button type="primary" onClick={this.addKefu}>添加客服账号</Button>
                      </div>
                      <div className="img" onMouseOver={() => this.showFloor(1)} onMouseOut={this.hideFloor}>
                          <img src="https://testimg.xiaokeduo.com/xkdnewyun/mchfile/images/kefu1.png?id=1" />
                          <div className="floor" onClick={() => this.showModal("https://testimg.xiaokeduo.com/xkdnewyun/mchfile/images/kefu1.png?id=1")} style={{ display: this.state.display1,color:'#fff',cursor:'pointer' }}>点击查看大图</div>
                      </div>
                  </Card>
                  <Card className={styles.CSstep2} bordered={false} title={CardTit[2]}>
                      <div className="text">
                          <p>1. 客服人员打开微信公众平台网页版客服工具；</p>
                          <p>2. 使用以上已添加的客服人员微信号扫码登录；</p>
                          <Button type="primary" onClick={this.loginWechat}>登录客服工具</Button>
                      </div>
                      <div className="img" onMouseOver={() => this.showFloor(2)} onMouseOut={this.hideFloor}>
                          <img src="https://testimg.xiaokeduo.com/xkdnewyun/mchfile/images/kefu2.png?id=1" />
                          <div className="floor" onClick={() => this.showModal("https://testimg.xiaokeduo.com/xkdnewyun/mchfile/images/kefu2.png?id=1")} style={{ display: this.state.display2,color:'#fff',cursor:'pointer' }}>点击查看大图</div>
                      </div>
                  </Card>
                </Spin>
            </Fragment>
        );
    }
}
export default connect(({ xcxauth, global }) => ({
  xcxauth: xcxauth.authInfo,
}))(CustomerService);
